<template>
    <div id="smRunku">
        <a-form size="mini" :model="searchData" layout="inline">
            <a-form-item label="仓库类型">
                <a-select popup-container="html"  class="bacClass" :style="{ width: '10rem' }" placeholder="" @change="whChange" v-model="searchData.whTypeName"
                    allow-clear>
                    <a-option v-for="item in whTypeList" :value="item.typeName">
                        {{ item.typeName }}
                    </a-option>
                </a-select>
            </a-form-item>
            <a-form-item label="选择公司">
                <a-select popup-container="html"  class="bacClass" :style="{ width: '10rem' }" @change="companyChange" placeholder="" v-model="searchData.firm"
                    allow-clear>
                    <a-option v-for="item in companyList" :value="item.id">
                        {{ item.typeName ? item.typeName + '-' + item.firmName : item.firmName }}
                    </a-option>
                </a-select>
            </a-form-item>
            <a-form-item label="仓库">
                <a-select popup-container="html"  class="bacClass" :style="{ width: '10rem' }" placeholder="" v-model="searchData.wh" @click="ckisPd" allow-clear
                    @change="isWhilist">
                    <a-option v-for="item in whList" :value="item.warehouseName">
                        {{ item.warehouseName }}
                    </a-option>
                </a-select>
            </a-form-item>
            <a-form-item>
                <a-button type="primary" @click="xuanzheKuc">选择库存单据</a-button>
            </a-form-item>
        </a-form>
    </div>
    <div id="smSm">
        <div>
            <span>扫描:</span><a-input class="bacClass" ref="getFocus" @press-enter="smXxs" v-model="searchData.smXx"
                :style="{ width: '400px', height: '40px', marginTop: '12px' }" allow-clear  @change="panDuan"/><a-checkbox v-model="checked">反扫</a-checkbox>
        </div>
    </div>

    <div class="gang"></div>
    <div id="ganss">
        <a-table :style="{
            width: '98%',
            height: '60%',
            margin: '0 auto',
            marginTop: '20px'
        }" size="mini" :scrollbar="true" sticky-header stripe :pagination="false" :bordered="true" :columns="baseCol"
            :data="dataList">
            <template #action="{ record }">
            </template>
        </a-table>
        <div class="gangs" v-show="siBoutton">
            <a-space>
                <a-button type="primary" @click="thBouton">确定</a-button>
                <a-button type="outline" @click="qxBouton">取消</a-button>
            </a-space>
        </div>
    </div>
    <a-modal :width="1200" v-model:visible="visible2" :on-before-ok="handleOk2" @cancel="handleCancel2">
        <template #title>
            退货单查询
        </template>
        <div class="rukuchaxs">
            <div><span>单据编号:</span><a-input class="bacClass" :style="{ width: '10rem' }"
                    v-model="danjubainhaos" allow-clear></a-input></div>
            <a-button type="primary" @click="queDingRks" size="mini">查询</a-button>
        </div>
        <a-table :style="{
            height: '500px',
        }" row-key="orderNo" :columns="columns" :data="data"
            :row-selection="{ showCheckedAll: true, width: 50, onlyCurrent: true }" v-model:selectedKeys="selectedKeys"
            :pagination="false">
            <template #xq="{ record }">
                <a-button type="outline" status="success" size="mini" @click="isXiang(record)">
                    <template #icon>
                        <icon-find-replace />
                    </template>
                    详 情
                </a-button>
            </template>
        </a-table>
        <paginationCopys :total="total" show-total show-jumper show-page-size @change="PageSize"
            @page-size-change="change1" style="justify-content: center" />
    </a-modal>
    <a-modal v-model:visible="visible" title="详情" :width="1200" :footer="false" :draggable="true">
        <a-table :style="{
            height: '500px',
            marginTop: '10px'
        }" stripe :bordered="true" :scrollbar="true" sticky-header :pagination="false" :columns="tableColumns1"
            :data="whListMingxs">
        </a-table>
    </a-modal>
</template>
<script setup lang="ts">
import { ref, reactive, watch,onMounted } from "vue"
import TreeUtils from "@/utils/TreeUtils"
import WHService, { Warhouse, CompanyList, WhTypeField } from '@/service/wh'
import { Message } from "@arco-design/web-vue"
import { post, get } from "@/api/http"

const getFocus = ref()

onMounted(()=>{
    getFocus.value?.focus();
})

const whService = new WHService()
const whTypeList = whService.whTypeList
const companyList:any = whService.companyList
const whTypeFieldList = whService.whTypeFieldList
const treeUtils = new TreeUtils()
const whList = ref<any[]>([])
const checked = ref(false)
const siBoutton = ref(false)
const searchData = reactive<{
    whTypeName: string;
    firm: string,
    wh: string,
    smXx: any,
    isDatas: any,
}>({
    firm: '',
    whTypeName: "",
    wh: '',
    smXx: '',
    isDatas: {}
});

const baseCol: any = ref<any[]>([])

const dataList: any = ref<any[]>([])

const companyChange = (val: any) => {
    whList.value = []
    searchData.wh = ''
    whService.getWarhouseList(searchData.firm, searchData.whTypeName)
}
watch(() => whService.whList.value, (o, n) => {
    whList.value = whService.whList.value
})
watch(() => whService.whTypeFieldList.value, () => {
    //  baseCol.splice(3,0, ...(whService.whTypeFieldList.value.map((f:any)=>{
    //     return {
    //         dataIndex:f.extendField,
    //         key:f.extendField,
    //         title:f.fieldName,
    //         width:150
    //     }
    // })))
    baseCol.value = whService.whTypeFieldList.value.map((f: any) => {
        return {
            dataIndex: f.englishName,
            key: f.englishName,
            title: f.chineseName,
            slotName: f.englishName,
            width: 150,
        }
    })
    baseCol.value.unshift({
        dataIndex: 'orderNo',
        key: 'orderNo',
        title: '单据编号',
        width: 180
    }, {
        dataIndex: 'firm',
        key: 'firm',
        title: '公司',
        width: 150
    }, {
        dataIndex: 'warehouseTypeName',
        key: 'warehouseTypeName',
        title: '仓库类型',
        width: 150
    },
        {
            dataIndex: 'warehouseName',
            key: 'warehouseName',
            title: '仓库',
            width: 150
        })
})
const whChange = () => {
    whList.value = []
    searchData.wh = ''
    searchData.firm = ''
}
const smXxs = async () => {
    if (searchData.whTypeName == '' || searchData.wh == '' || searchData.firm == '') {
        Message.error('请先选择主页仓库类型或选择公司或仓库和单据类型')
        searchData.smXx = null
        return
    }
    if (!searchData.smXx) {
        return
    }

    try {
        searchData.isDatas = JSON.parse(searchData.smXx)
        if (searchData.isDatas.warehouseCode == undefined) {
            Message.error('请勿手动输入')
            searchData.smXx = null
            return
        }
        const res:any = await whService.smWhmxWarhouse({
            ...searchData.isDatas,
            firmId: searchData.firm, warehouseName: searchData.wh, warehouseTypeName: searchData.whTypeName,
            warehouseId:whList.value.map((item:any)=>{
                if(item.warehouseName == searchData.wh){
                    return item.id
                }
            })[0]
        })
        if (res.code == 200) {
            dataList.value = res.data
            siBoutton.value = true
            searchData.smXx = ''
        }else{
            Message.error(res.message)
            searchData.smXx = ''
        }
    } catch (error) {
        Message.error('请误重复扫描')
        searchData.smXx = null
    }
}
const qxBouton = () => {
    dataList.value = []
    searchData.smXx = null
    siBoutton.value = false
}

const thBouton =async ()=>{
    let qeDatas: any = {
        warehouseTypeName: dataList.value[0].warehouseTypeName,
        warehouseName: dataList.value[0].warehouseName,
        warehouseId:dataList.value[0].warehouseId,
        firmId: dataList.value[0].firmId,
        firm: dataList.value[0].firm,
        orderNo: dataList.value[0].orderNo,
        infoList: dataList.value
    }
    const res: any =await whService.thcCkSmWhmxWarhouse(qeDatas)
    if (res.code == 200) {
        dataList.value = []
        searchData.smXx = null
        siBoutton.value = false
        Message.success('出库成功')
    }
}
const ckisPd = () => {
    if (searchData.whTypeName == '' || searchData.firm == '') {
        Message.error('请先选择仓库类型和所属工厂')
        return
    }
}
const isWhilist = (whName: any) => {
    let isWhId;
    whList.value.forEach((item: any) => {
        if (whName == item.warehouseName) {
            isWhId = item.id
        }
    })
    whService.loadWHTypeFieldList({ warehouseId: isWhId, showType: 4 })
}
const panDuan = (val:any)=>{
    if(val != ''){
        try {
        JSON.parse(val)
     } catch (error) {
        Message.error('请扫描完整')
        searchData.smXx = null
     }
    }
}
const xuanzheKuc = () => {
    if (searchData.whTypeName == '' || searchData.wh == '' || searchData.firm == '') {
        Message.error('请先选择主页仓库类型或选择公司或仓库和单据类型')
        return
    }
    visible2.value = true
}
const visible2 = ref(false)
const handleOk2 = async () => {
    if (selectedKeys.value.length == 0) {
        Message.error('请勾选数据')
        return false
    }
    let warehouseNames: any;
    whList.value.forEach((items: any) => {
        if (items.warehouseName == searchData.wh) {
            warehouseNames = items.id
        }
    })
    let isArray: any = []
    selectedKeys.value.forEach((o: any) => {
        data.value.forEach((v: any) => {
            if (o == v.orderNo) {
                isArray.push(v)
            }
        })
    })
    let isDataObj: any = []
    isArray.forEach((z: any) => {
        isDataObj.push(
            {
                "warehouseTypeName": z.warehouseTypeName,
                "warehouseName": z.warehouseName,
                "firmId": z.firmId,
                "orderNo": z.orderNo
            }
        )
    })
    let isDataList: any = []
    const res: any = await whService.DyWhmxWarhouse(isDataObj)
    if (res.code == 200) {
        // qrData.code = JSON.stringify({
        //     warehouseCode: encodeURI(res.data[0].warehouseCode),
        //     warehouseTypeCode: encodeURI(res.data[0].warehouseTypeCode),
        //     orderNo: encodeURI(res.data[0].orderNo),
        //     infoType: Number(1)
        // })
        res.data.forEach((res: any) => {
            isDataList.push({
                warehouseCode: res.warehouseCode,
                warehouseTypeCode: res.warehouseTypeCode,
                orderNo: res.orderNo,
                infoType: Number(2),
                firmId: searchData.firm,
                warehouseName: searchData.wh,
                warehouseTypeName: searchData.whTypeName,
                warehouseId: warehouseNames
            })
        })
        const resz: any = await whService.smWhmxWarhouses2(isDataList)
        if (resz.code == 200) {
            dataList.value = resz.data
            siBoutton.value = true
            searchData.smXx = ''
            selectedKeys.value = []
            data.value = []
            danjubainhaos.value = ''
            return true
        } else {
            Message.error(resz.message)
            return false
        }
    } else {
        return false
        Message.error(res.message)
    }
}
const handleCancel2 = () => {
    selectedKeys.value = []
    data.value = []
    danjubainhaos.value = ''
    visible2.value = false
}
const columns: any = ref([
    {
        dataIndex: 'orderNo',
        key: 'orderNo',
        title: '单据编号',
        width: 180
    },
    {
        dataIndex: 'auditName',
        key: 'auditName',
        title: '审核人',
        width: 100
    },
    {
        title: '审核时间',
        dataIndex: 'auditTime',
        key: 'auditTime',
        width: 180
    },
    {
        title: '创建人',
        dataIndex: 'createName',
        key: 'createName',
        width: 150
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: 180
    },
    {
        title: '修改人',
        dataIndex: 'updateName',
        key: 'updateName',
        width: 150
    },
    {
        title: '修改时间',
        dataIndex: 'updateTime',
        key: 'updateTime',
        width: 180
    },
    {
        title: '详情',
        dataIndex: 'xq',
        key: 'xq',
        slotName: 'xq',
        width: 100,
        fixed: "right",
    },
])
const data: any = ref([])
const selectedKeys: any = ref([])
const danjubainhaos = ref('')
const total = ref(10);
const page = ref(1);
const size = ref(10);
function PageSize(val: any) {
    page.value = val
    queDingRks();
}
function change1(val: any) {
    size.value = val
    queDingRks();
}
const queDingRks = () => {
    let warehouseNames;
    whList.value.forEach((items: any) => {
        if (items.id == searchData.wh) {
            warehouseNames = items.warehouseName
        }
    })
    post({
        url: "wms/WarehousetypeFieldvalue/getInvoicesByPage",
        data: {
            "page": page.value,
            "size": size.value,
            "warehouseTypeName": searchData.whTypeName,
            "firmId": searchData.firm,
            "infoType": 4,
            "auditState": 2,
            orderNo:danjubainhaos.value,
            warehouseName: searchData.wh
        },
    }).then((res: any) => {
        if (res.code == 200) {
            data.value = res.data.list
            total.value = res.data.total
        } else {
            Message.error(res.message)
        }
    })
}
let visible = ref(false)
let whListMingxs = ref<any[]>([])
let tableColumns1: any = ref([])
const isXiang = async (val: any) => {
    const res: any = await whService.getWarhouseMinxList(val.orderNo, val.warehouseTypeName, val.warehouseName, val.firmId)
    if (res.code == 200) {
        whListMingxs.value = res.data
        visible.value = true
    }
}
watch(() => whService.whTypeFieldList.value, () => {
    tableColumns1.value = whService.whTypeFieldList.value.map((f: any) => {
        // rawMaterialName
        if (f.englishName == 'rawMaterialName') {
            return {
                dataIndex: f.englishName,
                key: f.englishName,
                title: f.chineseName,
                slotName: f.englishName,
                width: 450,
            }
        } else if(f.englishName == 'rawMaterialCode'){
            return {
                dataIndex: f.englishName,
                key: f.englishName,
                title: f.chineseName,
                slotName: f.englishName,
                width: 200,
            }
        } else if(f.englishName == 'sourceOrderNo'){
            return {
                dataIndex: f.englishName,
                key: f.englishName,
                title: f.chineseName,
                slotName: f.englishName,
                width: 200,
            }
        }else{
            return {
                dataIndex: f.englishName,
                key: f.englishName,
                title: f.chineseName,
                slotName: f.englishName,
                width: 150,
            }
        }
    })
    tableColumns1.value.unshift({
        dataIndex: 'orderNo',
        key: 'orderNo',
        title: '单据编号',
        width: 180
    })
})
</script>
<style lang="less" scoped>
#smRunku {
    width: 100%;

    form {
        width: 70% !important;
        margin: 0 auto !important;
    }
}

#smSm {
    width: 100%;

    div {
        width: 40%;
        margin: 0 auto;
        display: flex;

        span {
            font-size: 38px;
        }
    }

    margin-bottom: 40px;
}

.gangs {
    position: absolute;
    bottom: 15%;
    right: 5%;
    width: 100%;
    text-align: right;
}

#ganss {
    position: relative;
    top: 20px;
    width: 98%;
    margin: 0 auto;
    height: 65%;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 2px 2px #ccc;
}

.rukuchaxs {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
}
</style>